<template>
    <view class="pub_page pub_mine_info pub_header_padding">
        <pub-head headerName="mine_info" :headerConfig="headerConfig"></pub-head>
        <div class="pub_page_scroll page_box" v-if="userInfo != ''">
            <div class="info_div">
                <div class="headimg" @click="chooseImgBefore">
                    <pub-image class="img" :src="avatar"></pub-image>
                    <div class="p">修改头像</div>
                </div>
                <br>
                <div class="pub_inputs">
                    <div class="abox">
                        <div class="ali ali_align_right ali_disabled">
                            <div class="atitle">账号</div>
                            <input class="ainput" type="text" :value="userInfo.mobile" disabled>
                        </div>
                        <div class="ali ali_align_right">
                            <div class="atitle">昵称</div>
                            <input class="ainput" type="text" v-model="nickName" :placeholder="userInfo.nickName"
                                maxlength="10">
                        </div>
                        <!-- <div class="ali ali_align_right">
                            <div class="atitle">性别</div>
                            <picker class="apicker" @change="bindPickerChange" :value="sex==0?0:(sex-1)"
                                :range="sexOption">
                                <input type="text" :value="sex==0?'未知':sexOption[sex-1]" disabled>
                                <text class="icon-font-basic icon-b-arrow-1-2"></text>
                            </picker>
                        </div> -->
                    </div>
                </div>
            </div>
            <br>
            <br>
            <div class="pub_btn" @click="saveUserInfo">确定保存</div>
        </div>
    </view>
</template>

<script>
export default {
    data() {
        return {
            pagescrollTop: 0,
            headerConfig: {
                title: '基本信息',//标题栏内容
                left_type: 3,
                header_color: '#fff',
                title_color: '#000',
                left_content: 'dark',
            },

            userInfo: '',

            nickName: '',
            avatar: '',
            sex: 1,//0未知 1男 2女

            sexOption: ['男', '女'],
        };
    },
    onLoad() {
        this.getUserInfo();
    },
    onPageScroll(res) {
        this.pagescrollTop = res.scrollTop;
    },
    methods: {
        bindPickerChange(e) {
            this.sex = e.detail.value + 1;
        },
        async getUserInfo() {
            this.$comFun.openLoading();
            const res = await this.$request.get('user/userInfo', {});
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.userInfo = res.result;
                this.nickName = res.result.nickName;
                this.avatar = res.result.avatar;
                // this.sex = res.result.sex;
            }
        },
        async saveUserInfo() {
            if (!this.nickName.trim()) {
                this.$comFun.toast('昵称不能为空');
                return;
            }
            let nickName = this.nickName.trim();
            let regex = /^[\u4e00-\u9fa5_a-zA-Z0-9_]{1,10}$/; // 只包含英文字母的正则表达式
            console.log(regex.test(nickName)); // true
            if (!regex.test(nickName)) {
                this.$comFun.toast('昵称不能包含特殊字符');
                return;
            }

            this.$comFun.openLoading();
            const res = await this.$request.post('user/updateInfo', {
                avatar: this.avatar,
                nickName: nickName,
                // sex: this.sex
            });
            // console.log(res);
            this.$comFun.closeLoading();
            if (res.code == 200) {
                this.$comFun.toast('修改成功');
                let userInfo = this.$comFun.getUserInfo();
                userInfo.nickName = this.nickName;
                userInfo.avatar = this.avatar;
                this.$comFun.setUserInfo(userInfo);
                // if (this.$txChat) {
                //     this.$txChat.updateMyProfile({
                //         "nick": userInfo.nickName,
                //         "avatar": userInfo.avatar,
                //     })
                // }
            } else {
                this.$comFun.toast(res.message);
            }
            // 项目加载清空相关缓存数据（用户头像）
            // if (res.code == 200) {
            //     this.getUserInfo();
            // }
        },
        chooseImgBefore() {
            const that = this;
            uni.showModal({
                title: '权限申请',
                content: '用于头像上传，需要申请相机和相册的权限',
                success: function (res) {
                    if (res.confirm) {
                        that.chooseImg();
                    }
                }
            });
        },
        async chooseImg() {
            const that = this;
            getApp().imgUpload(1, (list) => {
                // console.log('list:', list);
                that.avatar = list[0];
            })
        }
    },
};
</script>

<style lang="scss" scoped>
@import "@/common/css/mine.scss";
</style>
